<template>
	<div class="container">
		<!-- 头部导航栏 -->
		<div class="header">
      <Nav></Nav>
    </div>
		<!-- /头部导航栏 -->
		<!-- 用户个人信息 -->
		<div class="user-body">
			<!-- 个人信息内容主体 -->
			<div class="user-info">
				<!-- 面包屑 -->
				<div class="user-title">
					<i class="el-icon-user" style="margin-right: 10px;margin-left: 10px;"></i>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>个人信息</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<!-- /面包屑 -->
				<!-- 模块分层 -->
				<div class="tier" />
				<!-- /模块分层 -->
				<!-- 模块标题 -->
				<div class="updata-title">
					<i class="el-icon-menu" style="margin-right: 10px;margin-left: 100px;"></i>
					<span>我的信息</span>
				</div>
				<!-- /模块标题 -->
				<!-- 修改信息模块 -->
				<div class="updata-body">
					<div class="updata-info">
						<el-form ref="form" label-width="80px">
							<el-form-item label="用户名:">
                <el-input  required  :disabled="true" v-model="user.name" style="color:#898989;"></el-input>
              </el-form-item>
							<el-form-item label="密码:">
								<el-input type="password" required  :disabled="true" v-model="user.password" style="color:#898989;">{{ user.password }}</el-input>
							</el-form-item>
							<el-form-item label="手机号:">
                <el-input  required  :disabled="true" v-model="user.phone" style="color:#898989;"></el-input>
              </el-form-item>
							<el-form-item style="text-align: center;">
                <el-button type="primary" style="width: 100px;" @click="handleEdit()">修改</el-button>
              </el-form-item>
						</el-form>
					</div>
          <!--修改信息界面-->
          <el-dialog title="修改信息" :visible.sync="updateFormVisible">
            <el-form>
              <el-form-item label="用户名称：" :label-width="formLabelWidth">
                <el-input v-model="Inform.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户密码：" :label-width="formLabelWidth">
                <el-input v-model="Inform.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户电话：" :label-width="formLabelWidth">
                <el-input v-model="Inform.phone" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="updateFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateUser()">修 改</el-button>
            </div>
          </el-dialog>
				</div>
				<!-- 修改信息模块 -->
				<!-- 模块分层 -->
				<div class="tier" />
				<!-- /模块分层 -->
				<!-- 模块标题 -->
				<div class="updata-title">
					<i class="el-icon-menu" style="margin-right: 10px;margin-left: 100px;"></i>
					<span>我的评分</span>
				</div>
				<!-- /模块标题 -->
				<!-- 历史评论模块 -->
				<div class="history-body">
					<div class="history-info">
						<el-table :data="History.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
							<el-table-column prop="filmname" label="电影名称" width="280" align="center"></el-table-column>
							<el-table-column prop="remark" label="评论内容" width="320" :show-overflow-tooltip="true" align="center"></el-table-column>
							<el-table-column prop="createTime" label="评论时间" :formatter="dateFormat" width="180" align="center"></el-table-column>
							<el-table-column fixed="right" label="操作" width="200" align="center">
								<template slot-scope="scope">
						   <el-button type="text" size="small" @click="updateScore(scope.row.id)">查看</el-button>
									<el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
          <!--评分信息修改界面-->
          <el-dialog title="修改信息" :visible.sync="scoreFormVisible">
            <el-form>
              <el-form-item label="电影名称：" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="score.filmname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="评论内容：" :label-width="formLabelWidth">
                <el-input type="textarea" :disabled="true" v-model="score.remark" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
<!--              <el-button @click="updateFormVisible = false">取 消</el-button>-->
<!--              <el-button type="primary" @click="toUpdateScore()">修 改</el-button>-->
            </div>
          </el-dialog>
				</div>
				<!-- 分页 -->
				<div class="pag">
          <el-pagination
            style="margin-right: 150px"
            background
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="History.length">
          </el-pagination>
        </div>
				<!-- /分页 -->
				<!-- /历史评论模块 -->
        <div class="tier" />
        <!--反馈模块-->
        <div class="updata-title">
          <i class="el-icon-menu" style="margin-right: 10px;margin-left: 100px;"></i>
          <span>我的反馈</span>
        </div>
        <div class="history-body">
          <div class="history-info">
            <el-table :data="Feedback.slice((currentPage-1)*pageSize,currentPage*pageSize)"  style="width: 100%">
              <el-table-column prop="title" label="反馈标题" width="200" align="center"></el-table-column>
              <el-table-column prop="feedback" label="反馈内容" width="200" show-overflow-tooltip align="center"></el-table-column>
              <el-table-column prop="createTime" label="反馈时间" width="180" align="center" :formatter="dateFormat"></el-table-column>
              <el-table-column prop="reply" label="回复内容" width="180" align="center"></el-table-column>
              <el-table-column fixed="right" label="操作" width="200" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="updateFeed(scope.row.id)">查看</el-button>
                  <el-button type="text" size="small" @click="deleteFeed(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--反馈信息修改界面-->
          <el-dialog title="修改信息" :visible.sync="feedFormVisible">
            <el-form>
              <el-form-item label="反馈标题：" :label-width="formLabelWidth">
                <el-input v-model="feed.title" :disabled="true" autocomplete="off"></el-input>
              </el-form-item>
                <el-form-item label="反馈内容：" :label-width="formLabelWidth">
                  <el-input type="textarea" :disabled="true" v-model="feed.feedback" autocomplete="off"></el-input>
                </el-form-item>
              <el-form-item label="回复内容：" :label-width="formLabelWidth">
                <el-input type="textarea" :disabled="true" v-model="feed.reply" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
<!--              <el-button @click="updateFormVisible = false">取 消</el-button>-->
<!--              <el-button type="primary" @click="toUpdateFeed()">修 改</el-button>-->
            </div>
          </el-dialog>
        </div>
        <!--分页-->
        <div class="pag">
          <el-pagination
            style="margin-right: 150px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="Feedback.length">
          </el-pagination>
        </div>
        <!--/分页-->
        <!--/反馈模块-->
			</div>
		<!-- /个人信息内容主体 -->
		</div>
		<!-- /用户个人信息 -->
		<!--Footer-->
		<div class="footer" style="margin-top: 20px">
		  <Footer></Footer>
		</div>
		<!--/Footer-->
	</div>
</template>

<script>
import Nav from '../components/Nav';
import Footer from '../components/Footer';
export default {
	name: 'Userinfo',
	data() {
		return {
      updateFormVisible: false,//修改页面
      scoreFormVisible: false,
      feedFormVisible:false,
      formLabelWidth: '100px',
		  Inform:{},
			user: {
				name: 'admin', // 用户名（不可修改）
				password: 'admin', // 昵称（可修改）
				phone: '171234476799', // 手机号
			},
			History: [{}],
      Feedback:[{}],
      currentPage: 1, //初始页
      pageSize: 5,    //每页的数据
      score:{},
      feed:{},
		};
	},
	methods: {
    //时间格式化
    dateFormat(row, column){
      let date = row.createTime;
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange1: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange1: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
	  /*初始化查询当前角色信息*/
	  findAll(){
      let id = localStorage.getItem("id")
      let _this = this
      this.$axios.get("http://localhost:8088/user/getUserById/" + id).then(function (res) {
        _this.user = res.data
      }).catch(function (err) {
        alert('查询失败')
      })
    },
    /*根据id查询角色*/
    handleEdit: function () {
      this.updateFormVisible = true
      let id = localStorage.getItem("id")
      let _this = this
      this.$axios.get("http://localhost:8088/user/getUserById/" + id).then(function (res) {
        _this.Inform = res.data
      }).catch(function (err) {
        alert('查询失败')
      })
    },
    /*更新角色*/
    updateUser() {
      let _this = this
      // 发送axios请求，根据查询一个
      this.$axios.post("http://localhost:8088/user/updateUser", _this.Inform).then(function (res) {
        _this.$message({
          showClose: true,
          message: '信息修改成功!',
          type: 'success'
        });
        _this.updateFormVisible = false
        setTimeout('location.reload()', 1000);
      }).catch(function (err) {
        _this.$message({
          showClose: true,
          message: '信息修改失败!',
          type: 'error'
        });
      })
    },
    /*查询所有的评价信息*/
    selectHistory(){
      let name = localStorage.getItem("name")
      let _this = this
      this.$axios.get("http://localhost:8088/score/selectByName/" + name).then(function (res) {
        _this.History = res.data
        console.log(res.data)
      }).catch(function (err) {
        alert('查询失败')
      })
    },
    /*查询所有的反馈信息*/
    selectFeedback(){
      let id = localStorage.getItem("id")
      let _this = this
      this.$axios.get("http://localhost:8088/feedback/SelectById/" + id).then(function (res) {
        _this.Feedback = res.data
        console.log(res.data)
      }).catch(function (err) {
        alert('查询失败')
      })
    },
    /*删除评分信息*/
    handleDelete(id) {
      let _this = this
      if (window.confirm('确定要删除评分吗？')) {
        // 发送axios请求，根据查询一个
        this.$axios.post("http://localhost:8088/score/deletedById/" + id).then(function () {
          _this.findAll();
          _this.$message({
            showClose: true,
            message: '评分删除成功!',
            type: 'success'
          });
          setTimeout('location.reload()', 1000);
        }).catch(function (err) {
          _this.$message({
            showClose: true,
            message: '评分删除失败!',
            type: 'error'
          });
        })
      }
    },
    /*删除反馈*/
    deleteFeed(id) {
      let _this = this
      if (window.confirm('确定要删除反馈吗？')) {
        // 发送axios请求，根据查询一个
        this.$axios.post("http://localhost:8088/feedback/deletedById/" + id).then(function () {
          _this.findAll();
          _this.$message({
            showClose: true,
            message: '反馈删除成功!',
            type: 'success'
          });
          setTimeout('location.reload()', 1000);
        }).catch(function (err) {
          _this.$message({
            showClose: true,
            message: '反馈删除失败!',
            type: 'error'
          });
        })
      }
    },
    /*打开评分信息*/
    updateScore(id){
      this.scoreFormVisible = true
      let _this = this
      this.$axios.get("http://localhost:8088/score/getUserScoreById/" + id).then(function (res) {
        _this.score = res.data
      }).catch(function (err) {
        alert('查询失败')
      })
    },
    /*打开反馈信息*/
    updateFeed(id){
      this.feedFormVisible = true
      let _this = this
      this.$axios.get("http://localhost:8088/feedback/getFeedbackById/" + id).then(function (res) {
        _this.feed = res.data
      }).catch(function (err) {
        alert('查询失败')
      })
    },
    /*修改评分信息*/

  },
	components: {
        Nav,
        Footer
	},
  mounted() {
	  this.findAll()
    this.selectHistory()
    this.selectFeedback()
    window.scrollTo(0,0)
  }
};
</script>
<style scoped>
.container {
	height:1500px;
	background-color: #f4f5f7;
}
.user-body {
	height: 1400px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.user-info {
	width: 90%;
	height: 95%;
	background-color: #ffffff;
}
.user-title {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	background-color: #ffffff;
}
.tier {
	width: 100%;
	height: 5px;
	background-color: #f4f5f7;
}
.updata-title {
	padding-top: 10px;
	width: 100%;
	height: 30px;
	color: #0074d9;
}
.updata-body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 250px;
}
.history-body {
	display: flex;
	justify-content: center;
	width: 100%;
  height: 350px;
}
.history-info {
	margin-top: 20px;
	width: 1000px;
}
.pag {
  margin-right: 50px;
	text-align: right;
	margin-top: 20px;
	width: 100%;
	height: 100px;
	background-color: #ffffff;
}
</style>
